<template>
	<view class="table">
		<view class="thead">
			<view class="golf-thead">
				<text class="golf-hole">球洞</text>
				<text class="golf-player">球手</text>
			</view>
			<view :style="{textAlign:align,backgroundColor:titleBg}" class="title" v-for="(item, index) in tableData" :key="index">
				<img style="width: 32rpx;height: 32rpx;border-radius: 6rpx;margin-right: 10rpx;vertical-align:middle;" :src="item.avatar ? item.avatar : '../../static/image/default.png'">
				<text style="display: inline-block;width: 68rpx;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;line-height: 100%;">{{ item.nickname }}</text>
				<text style="margin-left: 10rpx;color: white;padding:6rpx 10rpx;border-radius: 6rpx;width: 68rpx;width: 100rpx;" :class="[$utils.isColor(item.tee)]">{{teeList[item.tee - 1]}}</text>
			</view>
		</view>
		<view class="tbody_wrap">
			<view class="tbody">
				<view class="col" v-for="(item, index) in scoreHole" :key="index">
					<!-- <text>{{item}}</text> -->
					<view class="row" :style="{textAlign:align}" :class="[item.holeNo == firstHole ? 'firstCol' : 'baseBg', 'tbodyHead']">
						<!-- <text>{{ zItem.holeScoreList[index].handicap || '-' }}</text> -->
						<text :class="item.holeNo > 0 ? 'holeNo' : ''">{{item.holeNo > 0 ? item.holeNo : (item.holeNo === 0 ? 'TOT' : (item.holeNo === -1 ? 'IN' : 'OUT'))}}</text>
						<text>{{item.par}}</text>
					</view>
				</view>
			</view>
			<view class="tbody" v-for="(item, index) in tableData" :key="index">
				<view class="col" v-for="(item1, index1) in item.holeScoreList" :key="index1" @click="setScore(item1)">
					<view class="row" :style="{textAlign:align}">
						<text v-if="Number(item1.hit) > 0">{{ item1.handicap}}</text>
						<text v-else>{{ item1.teeDistance}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teeList: ['黑Tee', '金Tee', '蓝Tee', '白Tee', '红Tee']
			};
		},
		props: {
			tableData: {
				type: Array,
				required: true
			},
			scoreHole: {
				type: Array,
				required: true
			},
			align: {
				type: String,
				default: 'center'
			},
			firstHole: {
				type: String,
				default: 'center'
			},
			titleBg: {
				type: String,
				default: '#eee'
			}
		},
		methods: {
			setScore(item) {
				this.$emit('setCore', {par: item.par, holeNo: item.holeNo})
			}
		},
	};
</script>

<style lang="less">
	.table {
		display: flex;
		margin-top: 24rpx;
	}

	.thead {
		border-bottom: 1rpx solid #e5e5e5;
		box-shadow: 5rpx 0 5rpx #eee;
	}

	.golf-thead {
		background-color: #eee;
		min-width: 200rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 24rpx;
		color: #666;
		border: 1rpx solid #e5e5e5;
		border-bottom: none;
		border-right: none;
		position: relative;
	}

	.golf-hole {
		display: block;
		position: absolute;
		right: 5rpx;
		top: -20rpx;
	}

	.golf-player {
		display: block;
		position: absolute;
		left: 5rpx;
		bottom: -20rpx;
	}

	.title {
		box-sizing: border-box;
		position: relative;
		padding: 0 20rpx;
		min-width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 24rpx;
		color: #666;
		border: 1rpx solid #e5e5e5;
		border-bottom: none;
		border-right: none;
	}

	.tbody_wrap {
		overflow-x: auto;
		border-right: 1rpx solid #e5e5e5;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.tbody,
	.col {
		display: flex;
	}

	.tbody,
	.row {
		box-sizing: border-box;
		line-height: 88rpx;
		font-size: 24rpx;
		color: #666;
		min-width: 64rpx;
		height: 88rpx;
		border: 1rpx solid #e5e5e5;
		border-bottom: none;
		border-right: none;
		>.holeNo {
			width: 36rpx;
			height: 36rpx;
			border-radius: 36rpx;
			line-height: 36rpx;
			background-color: rgba(153,153,153,1);
			margin: 10rpx auto 0;
			color: white;
		}
	}
	.tbodyHead {
		>text {
			display: block;
		}
		line-height: 40rpx;
	}

	.baseBg {
		background-color: #fff;
	}

	.firstCol {
		>.holeNo {
			background-color: rgba(15,215,98,1);
		}
		// background-color: #007aff;
	}
</style>
